<template>
  <view :class="classes">
    <view class="axq-input__prefix">
      <slot name="prefix"></slot>
    </view>
    <template v-if="!textarea">
      <view v-if="password" class="axq-input__inner" :class="{'axq-input__inner--visible': isPasswdShow === true}">
        <input type="text" :placeholder="placeholder" :placeholder-class="phClass" :value="value"
          @input="handleInput" @blur="replaceInput" />
        <text v-if="isPasswdShow" @input="handleInput">{{value.replace(/\S/g, '*')}}</text>
      </view>
      <input v-else class="axq-input__inner" :value="value" :type="type" :placeholder="placeholder"
        :placeholder-class="phClass" :placeholder-style="placeholderStyle0" :disabled="disabled" @input="handleInput"
        @blur="replaceInput" />
    </template>
    <template v-else>
      <textarea class="axq-input__inner textarea" :autoHeight="autoHeight" :value="value" :placeholder="placeholder"
        :placeholder-class="phClass" :placeholder-style="placeholderStyle0" :disabled="disabled" :maxlength="maxlength"
        @input="handleInput" @blur="replaceInput"></textarea>
    </template>
    <view class="axq-input__suffix">
      <slot name="suffix"></slot>
    </view>
    <icon v-if="clearable && value" class="iconfont clear-btn" @tap="clear">&#xe62f;</icon>
  </view>
</template>

<script>
  export default {
    name: 'AInput',
    components: {},
    mixins: [],
    props: {
      value: [String, Number],
      password: Boolean,
      type: String,
      placeholder: String,
      placeholderClass: String,
      placeholderStyle: String,
      disabled: Boolean,
      trim: Boolean,
      clearable: Boolean,
      textarea: Boolean,
      maxlength: {
        type: Number,
        default: 140
      },
      autoHeight: Boolean,
      isPasswdShow: Boolean
    },
    data() {
      return {
        isShow: false
      }
    },
    computed: {
      classes() {
        let res = 'axq-input'
        if (this.clearable) res += ' axq-input--clearable'
        return res
      },
      phClass() {
        return 'axq-input__placeholder ' + (this.placeholderClass || '')
      }
    },
    methods: {
      handleInput(e) {
        let {
          value
        } = e.detail
        let res = value
        if (res && this.trim) {
          res = res.replace(/\s/g, '')
        }
        this.$emit('input', res)
        return res
      },
      replaceInput(e) {
        this.$emit('blur', e)
      },
      clear() {
        this.$emit('input', '')
      }
    }
  }
</script>

<style lang="less">
  .axq-input {
    .flexLayout(@a: center);

    .axq-input__inner {
      position: relative;
      flex: 1;
      min-height: 90rpx;
      font-size: @font-size-large;
      color: #333;
      
      input {
        margin-top:20rpx ;
      }
      text {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
      &--visible {
        input {
          color: RGBA(0, 0, 0,0);
        }
      }

      &.textarea {
        padding-top: 28rpx;
        width: auto;
        min-height: 90rpx;
        line-height: 1.2em;
      }
    }

    .axq-input__placeholder {
      font-size: 30rpx;
      color: #6f6d6d;
    }

    .clear-btn {
      padding-right: 20rpx;
      font-size: 50rpx;
      color: #d53383;

      &:active {
        filter: brightness(0.8);
      }
    }
  }
</style>